*{
  padding: 0;
  margin: 0;
}
a{
  text-decoration: none;
}
body{
  background-color: #dbdde0;
  font-family: "微软雅黑";
}
html{
  width: 100%;
  overflow-x: hidden;
}
li{
  list-style: none;
}
.w{
  width: 1300px;
  margin: 0 auto;
  box-sizing: border-box;
}
.kongbai{
  width: 1000px;
  box-sizing: border-box;
  background-color: #fff;
  height: 60px;
}
.gap{
  border-left: 1px solid #353535;
  border-right: 1px solid #0d0c08;
  height: 50px;
}
.header{
  background-color: #333;
  height: 63px;
  .header_container{
    display: flex;
    justify-content: space-between;
    align-items: center;
  } 
}
.nav{
  background: #222;
  height: 50px;
  width: 100%;
  margin-bottom: 30px;
  .nav_container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    .left{
      width: 525px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100%;
    }
    .right{
      width: 225px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100%;
    }
    .left a,.right a{
      color: #fff;
      // padding-left: 10px;
      box-sizing: border-box;
      color: #fff;
      font-family: "微软雅黑";
      font-size: 16px;
      width: 75px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: #2a2a2a;
    }
  } 
}
.content{
  margin-bottom: 50px;
  .view{
    display: flex;
    height: 660px;
    .left{
      width: 180px;
      // height: 529px;
      background-color: #fff;
      .hearder{
        padding: 10px 0;
        text-align: right;
        background-color: #5c5d5e;
        display: flex;
        flex-direction: column;
        span{
          margin-right: 10px;
        }
      }
      .bottom{
        padding: 25px 0;
        background-color: #fff;
        height: 529px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        .item{
          height: 23px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          a{
            width: 60px;
            background-color: #e6e6e6;
            margin-right: 5px;
            margin-left: 10px;
            color: #444;
            font-size: 12px;
            line-height: 23px;
            padding-right: 5px;
            box-sizing: border-box;
            text-align: right;
          }
        }
      }
    }
    .content{
      width: 890px;
      height: 100%;
      display: flex;
      justify-content: center;
      background-color: #fff;
      .imgLeft,.imgRight{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 50%;
        justify-content:space-around;
        align-items: center;
        margin-top: 10px;
        box-sizing: border-box;
      }
      .imgRight{
        margin-top: 5px;
        box-sizing: border-box;
      }
    }
    .right{
      height: 100%;
      width: 300px;
      background-color: #333;
      .right_container{
        h2{
            height: 32px;
            background: #222;
            border-top: 1px solid #464646;
            padding-top: 8px;
            color: #fff;
            padding-left: 10px;
            font-size: 16px;
            font-family: "微软雅黑";
            width: 290px;
            font-weight: lighter!important;
        }
        .tap1{
          .item{
            background: #333;
            border-color: #464646;
            padding: 20px 10px;
            width: 300px;
            box-sizing: border-box;
            display: flex;
            box-sizing: border-box;
            justify-content: space-around;
            border: 1px solid #464646;
          }
        }
        .tap2{
          height: 250px;
          width: 100%;
          .function{
            margin-top: 20px;
              display: flex;
              justify-content: space-around;
              .item{
                width: 50%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                img{
                  width: 95px;
                  height: 95px;
                }
                span{
                  color: #fff;
                  margin-top: 10px;
                  font-size: 12px;
                  margin-bottom: 10px;
                }
              }
          }
          .bottom{
            background-color: #222;
            color: #999;
            text-align: center;
            padding: 16px 0;
            font-size: 12px;     
          }
        }
        .tap3{
          .item{
            height: 114px;
            background-color: #333;
            display: flex;
            width: 100%;
            justify-content: space-around;
            align-items: center;
            border: 1px solid #464646;
            box-sizing: border-box;
            img{
              width: 64px;
              height: 64px;
            }
          }
        }
      }   
    }
  }
  .write{
    display: flex;
    height: 300px;
    .left{
        width: 180px;
        background-color: #fff;
        .hearder{
          padding: 10px 0;
          width: 100%;
          text-align: right;
          background-color: #dd171f;
          display: flex;
          flex-direction: column;
          span{
            margin-right: 10px;
          }
        }
    }
    .write_content{
       width: 820px;
       justify-content: space-around;
      display: flex;
      background-color: #fff;
      height: 100%;
      .item{ 
          width: 25%;
          display: flex;
          flex-direction: column;
          // justify-content: center;
          text-align: center;
          .top{
            height: 125px;
            padding: 10px 20px;
            margin-bottom: 0;
            border: 1px solid #ddd;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            h3{
              font-size: 20px;
              color: #313131;
              margin-top: 20px;
              height: 24px;
              overflow: hidden;
              font-family: "宋体";
            }
            span{
              padding-left: 14px;
              height: 20px;
              width: 58px;
              background: url(http://www.dili360.com/public/images/icons.png) -620px -513px no-repeat;
              line-height: 20px;
              color: #999;
              font-family: "宋体";
            }
          img{
            width: 239px;
            height: 134px;
          }
          }     
      }
    }
  }
} 
.footer{
  background: #333;
  padding-top: 28px;
  padding-bottom: 20px;
  .footer_container{
    .first_ul{
      display: flex;
      justify-content: space-around;
      li{
        width: 263px;
        h2{
          color: #fff;
          text-shadow: 1px 2px #000;
          font-size: 14px;
          font-family: "微软雅黑";
          margin-bottom: 10px;
        }
        ul>li{
          a>h3{
            font-weight: lighter;
            font-size: 12px;
            color: #999;
            margin-top: 5px;
          }
        }
      }
    }
    .footer_bottom{
      margin-top: 30px;
      .top{
        height: 95px;
        width: 610px;
        display: flex;
        justify-content: flex-start;
        .item{
          height: 100%;
          width: 33%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          .tubiao{
            margin-top: 10px;
            display: flex;
            width: 100%;
            justify-content: space-around;
          }
          span{
            font-weight: lighter;
            font-size: 12px;
            color: #fff;
          }
          .wx,.wb,.ff,.fg,.mm{
            height: 32px;
            width: 32px;
            background: url(http://www.dili360.com/public/images/icons.png) no-repeat;
          }
          .i1{   
            background-position: -168px -70px;
          }
          .i2{
            background-position: -208px -71px;
          } 
          .i3{
            background-position: -244px -70px;
          }
          .i4{
            background-position: -277px -70px;
          }
          .i5{
            background-position: -312px -70px;
          }
        }
      }
      .bottom{
        margin-top: 20px;
        // width: 100%;
        display: flex;
        flex-direction: column;
        p{
          font-weight: lighter;
          font-size: 12px;
          color: #999;
          font-family: "宋体";
          a{
            font-weight: lighter;
            font-size: 12px;
            color: #999;
            font-family: "宋体";
            margin-left: 5px;
          }
          span{
            margin-left: 5px;
          }
        }
        .lianjie{
          display: flex;
        }
      }
    }
  }
}





